<template>
  <div class="vue-swiper clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://surmon-china.github.io/vue-awesome-swiper/">https://surmon-china.github.io/vue-awesome-swiper/</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-awesome-swiper --save<br>
            <br>
            import 'swiper/dist/css/swiper.css'<br>
            import { swiper, swiperSlide } from 'vue-awesome-swiper'<br>
            <br>
            export default {<br>
              &nbsp;&nbsp;components: {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;swiper,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;swiperSlide<br>
              &nbsp;&nbsp;}<br>
            }
          </code>
        </div>
      </el-card>
      <swiper :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'VueSwiper',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        loop: true,
        speed: 600,
        autoplay: {
          delay: 600
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-swiper{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    .swiper-container {
      width: 100%;
      height: 100px;
    }
  }
}
</style>
